{% extends "base.html" %}

{% block content %}
  {% set title = news_item.title or '' %}
  {% set review = news_item.review or '' %}
  {% set source = news_item.source or 'manual' %}
  {% set osint_source_id = news_item.osint_source_id or 'manual' %}
  {% set published = news_item.published or '' %}
  {% set attributes_list = news_item.attributes or [] %}
  {% set item_id = news_item.id %}

  {% set read_only = source and source != 'manual' %}
  {% set is_edit = item_id not in ['0', '', none] %}
  {% set submit_label = 'Add to story' if story_id_val else ('Update news item' if is_edit else 'Create news item') %}
  {% set source_badge = 'badge-success' if source == 'manual' else 'badge-warning' %}
  {% set current_url = request.full_path.rstrip('?') if request.full_path else request.path %}

  <section id="news-item-editor" class="px-4 py-4" hx-get="{{ current_url }}" hx-trigger="story:reload from:body" hx-target="this" hx-swap="outerHTML">
    <div class="mx-auto flex max-w-5xl flex-col gap-6">
      <header class="space-y-3">
        <p class="text-xs uppercase tracking-wide text-base-content/60">News item · {{ item_id if is_edit else 'manual-draft' }}</p>
        <div class="flex flex-wrap items-center gap-3">
          <h1 class="text-3xl font-semibold tracking-tight">{{ title or 'Create manual news item' }}</h1>
          <span class="badge {{ source_badge }} badge-sm">{{ source or 'manual' }}</span>
          {% if story_id_val %}<span class="badge badge-outline badge-sm">Story {{ story_id_val }}</span>{% endif %}
        </div>
        {% if story_id_val %}
          <p class="text-sm text-base-content/70">
            Submitting will link this entry to story <code class="badge badge-ghost badge-xs">{{ story_id_val }}</code>.
          </p>
        {% endif %}
      </header>

      {% if read_only %}
        <div class="alert alert-warning shadow-lg border border-warning/40">
          <span class="font-semibold text-sm">Editing disabled</span>
          <span class="text-sm">Only manually created news items can be edited here. Review the content below or open the original source to make updates.</span>
        </div>
      {% endif %}

      <form id="news-item-form"
            class="card bg-base-100 shadow-xl border border-base-200"
            hx-post="{{ url_for('assess.create_news_item', news_item_id=item_id) }}"
            hx-target="#notification-bar"
            hx-swap="innerHTML">
        <div class="card-body space-y-6">
          <label class="input w-full">
            <span class="label-text font-semibold">Title <span class="text-error">*</span></span>
            <input type="text"
                   name="title"
                   value="{{ title }}"
                   required
                   placeholder="Add a headline that summarises the article"
                   class="input input-bordered input-lg w-full"
                   {% if read_only %}readonly{% endif %}>
          </label>

          <label class="input w-full">
            <span class="label-text font-semibold">Source <span class="text-error">*</span></span>
            <input type="text"
                   name="source"
                   value="{{ source }}"
                   required
                   placeholder="Source of the news item (e.g. example.com)"
                   class="input input-bordered input-lg w-full"
                   {% if read_only %}readonly{% endif %}>
          </label>

          <label class="input w-full">
            <span class="label-text font-semibold">Published <span class="text-error">*</span></span>
            <input type="datetime-local"
                   name="published"
                   value="{{ published }}"
                   x-data="{}"
                   x-init="if (!$el.value) { const now = new Date(); now.setMinutes(now.getMinutes() - now.getTimezoneOffset()); $el.value = now.toISOString().slice(0, 16); }"
                   class="input input-bordered w-full required"
                   {% if read_only %}readonly{% endif %}>
            <span class="label-text-alt text-xs text-base-content/60">Use local time</span>
          </label>

          <label class="input w-full">
            <span class="label-text font-semibold">Link</span>
            <input type="url"
                   name="link"
                   value="{{ news_item.link }}"
                   placeholder="https://example.com/story"
                   class="input input-bordered w-full"
                   {% if read_only %}readonly{% endif %}>
            <span class="label-text-alt text-xs text-base-content/60">Providing a URL helps others trace the original source.</span>
          </label>

          <label class="floating-label w-full">
            <span class="label font-semibold">Content</span>
            <textarea name="content"
                      class="textarea textarea-bordered w-full"
                      placeholder="Paste the relevant excerpt or your own summary"
                      {% if read_only %}readonly{% endif %}>{{ news_itemcontent }}</textarea>
          </label>

          <label class="floating-label w-full">
            <span class="label font-semibold">Analyst review</span>
            <textarea name="review"
                      rows="5"
                      class="textarea textarea-bordered w-full"
                      placeholder="Capture analyst commentary, caveats, or recommended follow-up"
                      {% if read_only %}readonly{% endif %}>{{ review }}</textarea>
          </label>

          <section class="rounded-2xl border border-base-200 bg-base-200/40 p-5"
                   x-data='{ attributes: {{ attributes_list | tojson }}, init() { if (!Array.isArray(this.attributes)) { this.attributes = Object.values(this.attributes || {}); } this.attributes = this.attributes.map(attr => { if (!attr) return { key: "", value: "" }; if (typeof attr === "string") return { key: attr, value: "" }; return { key: attr.key || "", value: attr.value || "" }; }); if (this.attributes.length === 0) { this.attributes.push({ key: "", value: "" }); } }, addAttribute() { this.attributes.push({ key: "", value: "" }); }, removeAttribute(index) { this.attributes.splice(index, 1); if (this.attributes.length === 0) { this.attributes.push({ key: "", value: "" }); } } }'>
            <div class="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h2 class="text-lg font-semibold">Attributes</h2>
                <p class="text-xs text-base-content/60">Optional key/value tags like sentiment, TLP, or classification.</p>
              </div>
              <button type="button" class="btn btn-outline btn-sm" @click="addAttribute()" {% if read_only %}disabled{% endif %}>Add attribute</button>
            </div>

            <div class="mt-4 flex flex-col gap-3">
              <template x-for="(attribute, index) in attributes" :key="index">
                <div class="flex items-center justify-between gap-4">
                  <input class="input input-bordered input-sm flex-1"
                         type="text"
                         x-model="attribute.key"
                         name="attributes[][key]"
                         placeholder="Key (e.g. sentiment_category)"
                         {% if read_only %}disabled{% endif %}>
                  <input class="input input-bordered input-sm flex-1"
                         type="text"
                         x-model="attribute.value"
                         name="attributes[][value]"
                         placeholder="Value"
                         {% if read_only %}disabled{% endif %}>
                  <button type="button" class="btn btn-xs text-error font-semibold flex-shrink-0" @click="removeAttribute(index)" {% if read_only %}disabled{% endif %}>
                    Remove
                  </button>
                </div>
              </template>
            </div>
          </section>

          <input type="hidden" name="osint_source_id" value="manual">

          <div class="flex flex-col gap-3 md:flex-row md:items-center">
            <button type="submit" class="btn btn-primary md:w-56" {% if read_only %}disabled{% endif %}>{{ submit_label }}</button>
            <a href="{{ url_for('assess.assess') }}" class="btn btn-ghost md:w-40">Cancel</a>
            {% if read_only %}<p class="text-xs text-error md:ml-2">Submission disabled because this item originated from {{ source }}.</p>{% endif %}
          </div>
        </div>
      </form>
    </div>
  </section>
{% endblock content %}
